<template>
   <div class="better-scroll" ref="wrapper">
        <slot></slot>
   </div>
</template>
<script>
    import Hammer from "hammerjs"
    import BScroll from 'better-scroll'
    export default {
        props: {
          probeType:{
            type:Number,
            default:1
          },
          click:{
            type:Boolean,
            default:true
          },
          data:{
            type:Array,
            default:null
          },
          listenScroll:{
            type:Boolean,
            defalut:false
          },
          pullUpLoad:{
            type:Boolean,
            default:false
          },
          scrollbar:{
            type:Boolean,
            default:true
          },
          bounce:{
            type:Boolean,
            default:true
          },
          listenScrollBottom:{
            type:Boolean,
            default:false
          }
        },
        data() {
            return {}
        },
        methods: {
          _initScroll(){
            let ScrollBottomState = false;

            if(!this.$refs.wrapper){
              return
            }
            this.scroll = new BScroll(this.$refs.wrapper,{
              probeType:this.probeType,
              click:this.click,
              pullUpLoad:true,
              scrollbar:this.scrollbar,
              bounce:this.bounce
            });

            if(this.listenScroll){
              let that = this;
              this.scroll.on("scroll",function(pos){
                that.$emit("scroll",pos)
              })
            }
//            如果监听滚到底部
            if(this.listenScrollBottom){
              let that = this;
              this.scroll.on("scroll",function (pos) {
                let max = that.scroll.maxScrollY  + 20;
                if(pos.y < max && !ScrollBottomState){
                  ScrollBottomState = true;
                  that.$emit('scrollBottom',pos);
                }
                if(pos.y > max){
                  ScrollBottomState = false;
                }
              })
            }

            if(this.pullUpLoad){
              let that = this;
              this.scroll.on("pullingUp",function (pos) {
                that.$emit('pullingUp',pos)
              })
            }

            this.scroll.on("flick",()=>{
              if(this.scroll.distX < -50){
                this.$emit("flick-left",this.scroll.distX)
              }
            })

          },
          enable(){
            this.scroll && this.scroll.enable()
          },
          disable(){
            this.scroll && this.scroll.disable()
          },
          refresh(){
            setTimeout(()=>{
              this.scroll && this.scroll.refresh()
            },20)
          },
          scrollTo(){
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
          },
          scrollToElement(){
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
          },
          finishPullUp(){
            this.scroll && this.scroll.finishPullUp.apply(this.scroll,arguments)
          }
        },
        components: {},
        mounted() {
          setTimeout(()=>{
            this._initScroll();
          },20);
        },
        created() {

        },
        watch:{
          data(){
            setTimeout(()=>{
              this.refresh();
            },20)
          }
        }
    }
</script>

<style lang="less">
  .better-scroll{
    height: 100%;
    &-wrapper{

    }
  }
</style>
